<template>
  <div style="text-align: center">
    <el-row :gutter="20">


      <el-col :span="18">
        <div>
          <img
            data-v-552e0912=""
            src="http://139.196.243.68/app/img/lxc/lesson_detail.png"
          />
        </div>
      </el-col>

           <el-col :span="6">
        <div>
            学习进度
          <el-progress type="circle" :percentage="75"></el-progress>
        </div>
                <div>
            第一章
         <el-progress :percentage="99"></el-progress>
        </div>
            <div>
            第二章
         <el-progress :percentage="75"></el-progress>
        </div>
            <div>
            第三章
         <el-progress :percentage="77"></el-progress>
        </div>
            <div>
            第四章
         <el-progress :percentage="85"></el-progress>
        </div>
            <div>
            第五章
         <el-progress :percentage="87"></el-progress>
        </div>
            <div>
            第六章
         <el-progress :percentage="90"></el-progress>
        </div>
            <div>
            第七章
         <el-progress :percentage="60"></el-progress>
        </div>    <div>
            第八章
         <el-progress :percentage="65"></el-progress>
        </div>    <div>
            第九章
         <el-progress :percentage="62"></el-progress>
        </div>    <div>
            第十章
         <el-progress :percentage="61"></el-progress>
        </div>    <div>
            第十一章
         <el-progress :percentage="71"></el-progress>
        </div>    <div>
            第十二章
         <el-progress :percentage="82"></el-progress>
        </div>    <div>
            第十三章
         <el-progress :percentage="93"></el-progress>
        </div>    <div>
            第十四章
         <el-progress :percentage="85"></el-progress>
        </div>    <div>
            第十五章
         <el-progress :percentage="74"></el-progress>
        </div>  
  
      </el-col>
    </el-row>
  </div>
</template>
1

<style>


.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>